<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../Images/font/iconfont.css">
</head>

<body>
    <!-- 头部开始 -->
    <header class="mall-header">
        <div class="header-top">
            <div class="header-topbar">
                <div class="topbar-user">
                    <a href="javascript:;">登录</a>
                    &nbsp;或 &nbsp;
                    <a href="../html/enroll.html">注册</a>
                    &nbsp;ANTA会员
                </div>
                <div class="topbar-cart">
                    <a href="javascript:;" class="iconfont icon-gouwuche">
                    </a>
                </div>
                <div class="topbar-service">
                    <a href="javascript:;" class="iconfont icon-erji"></a>
                </div>
                <div class="topbar-en">EN</div>
            </div>
        </div>
        <div class="header-nav">
            <div class="center">
                <div class="header-logo">
                    <div class="logo-inner">
                        <a href="../html/index.html"><img src="../Images/10005.svg" alt=""></a>
                    </div>
                </div>
            </div>
            <ul class="header-list">
                <li> <a href="javascript:;"><b>冬奥国旗款</b></a>
                </li>
                <li><a href="javascript:;"><b>男子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>运动鞋</li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>户外综训鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>外套夹克</li>
                                    <li>羽绒服/马甲</li>
                                    <li>短袖T恤</li>
                                    <li>长裤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜子</li>
                                </ul>
                                <ul>
                                    <li><b>运动项目</b></li>
                                    <li>跑步</li>
                                    <li>篮球</li>
                                    <li>综训</li>
                                    <li>生活</li>
                                    <li>健身</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>女子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>棉鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>羽绒服</li>
                                    <li>套头卫衣</li>
                                    <li>外套、夹克</li>
                                    <li>长裤</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童安踏</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li>新品上市</li>
                                    <li>男中大童</li>
                                    <li>女中大童</li>
                                    <li>男小童</li>
                                    <li>女小童</li>
                                    <li>婴童</li>
                                </ul>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>足球鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>羽绒服</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                    <li>长裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童</b></a>
                </li>
                <li><a href="javascript:;"><b>品牌文化</b>
                    </a></li>
                <li><a href="javascript:;"><b>观赏视频</b>
                    </a></li>
                <li><a href="javascript:;"><b>联系我们</b>
                    </a></li>
                <li class="nav-item last">
                    <div class="nav-search-box">
                        <a href="javascript:;" class="nav-search-btns"><img src="../Images/10007.svg" alt=""></a>
                        <input type="text" placeholder="搜索">
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- 头部结束 -->
    <!-- 中部开始 -->
    <div class="main-container">
        <div class="banner">
            <a href="javascript:;"> <img src="../Images/10001.jpg" alt="">
                <div class="layout">
                    <div class="mainbox">
                        <div class="header-tit"></div>
                        <div class="username">
                            <div class="login">
                                <div class="login-tab">
                                    <h6 class="password">账号密码登录</h6>
                                    <h6 class="duanxin">短信快捷登录</h6>
                                </div>
                                <div class="input">
                                    <input class="top" type="text" id="text2"
                                        placeholder="&nbsp;&nbsp;邮箱/手机号码/安踏帐号"><span class="user"></span>
                                    <input class="under" type="password" placeholder="&nbsp;&nbsp;密码"><span
                                        class="user"></span>
                                </div>
                                <div class="btns">立即登录</div>
                            </div>
                            <div class="other-login">
                                <div class="other-type">
                                    <div class="word">其他方式登录</div>
                                </div>
                                <div class="weixin"><img src="../Images/1000W.svg" alt=""></div>
                            </div>
                            <div class="links">
                                <div class="links-type">
                                    <a href="javascript:;" class="active">账号注册</a>
                                    <span>|</span>
                                    <a href="javascript:;" class="toggle">忘记密码</a>
                                </div>
                            </div>
                        </div>
                        <!-- 替换 -->
                        <div class="message none">
                            <div class="login">
                                <div class="login-tab">
                                    <h6 class="password">账号密码登录</h6>
                                    <h6 class="duanxin">短信快捷登录</h6>
                                </div>
                                <div class="logbox">
                                    <input class="top" type="text" placeholder="&nbsp;&nbsp;手机号码">
                                    <div class="code">
                                        <input class="bottom" type="text" placeholder="&nbsp;&nbsp;请输入图片验证码">
                                        <input class="yanzheng" type="text" placeholder="验证码">
                                    </div>
                                    <div class="label">
                                        <div class="left">&nbsp;&nbsp;短信验证码</div>
                                        <div class="right">获取验证码</div>
                                        <div class="btns">立即登录</div>
                                    </div>
                                </div>
                            </div>
                            <div class="other-login">
                                <div class="other-type">
                                    <div class="word">其他方式登录</div>
                                </div>
                                <div class="weixin"><img src="../Images/1000W.svg" alt=""></div>
                            </div>
                            <div class="links">
                                <div class="links-type">
                                    <a href="javascript:;" class="active">账号注册</a>
                                    <span>|</span>
                                    <a href="javascript:;" class="toggle">忘记密码</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <!-- 中部结束 -->
    <!-- 尾部开始 -->
    <div class="footer">
        <div class="footer-main">
            <div class="footer-center">
                <div class="main-logo">
                    <img src="../Images/10002.svg" alt="">
                </div>
                <div class="main-ft">
                    <div class="service-one">
                        <h4>
                            在线客服
                            <span><img src="../Images/10006.svg" alt=""></span>
                        </h4>
                        <h4>
                            在线资讯
                            <span>400-858-2020</span>
                        </h4>
                    </div>
                    <div class="service-two">
                        <img src="../Images/10003.jpg" alt="">
                    </div>
                </div>
                <div class="company">
                    <p>Copyright(C) 2012-2020 by www.ANTA.cn&nbsp;&nbsp;
                        &copy;安踏体育用品有限公司版权所有&nbsp;&nbsp;营业执照&nbsp;&nbsp;开户许可证&nbsp;&nbsp;个人信息保护政策</p>
                    <span>闽ICP备2021011550号-2nbsp;&nbsp;闽公网安备35020302033806号</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 侧边导航 -->
    <div class="web-cover"></div>
    <!-- 尾部结束 -->
    <a href="../Images/php/login.php"></a>
    <!-- 尾部结束 -->
</body>

</html>
<script src="../Images/js/jquery.min.js"></script>
<script src="../Images/js/cook.js"></script>
<script>
    //回到顶部
    $(".web-cover").on("click", function () {
        $("html,body").animate({  // 让body和html回到顶部
            scrollTop: 0
        }, 800)
    })

    /*登录验证换背景颜色 */

    $('.mainbox').on('click', '.duanxin', function () {
        console.log($(this));
        $('.username').css('display', 'none')
        $('.password').css('color', 'black')
        $('.message').css('display', 'block')
        $('.duanxin').css('color', '#bbb')
    })
    $('.mainbox').on('click', '.password', function () {
        console.log($(this));
        $('.username').css('display', 'block')
        $('.password').css('color', 'black')
        $('.message').css('display', 'none')
        $('.duanxin').css('color', '#bbb')
    })

    // 登录验证

    function setCookie(key, value, day) {
        let d = new Date();
        d.setDate(d.getDate() + day);
        document.cookie = key + "=" + value + ";expires=" + d;
    }
    $(".btns").on("click", function () {
        $.post('../Images/php/login.php', { "username": $(".top").val(), "userpass": $(".under").val() }, function (data) {
            console.log(data);
            if (data.trim() == 'success') {
                alert("登录成功")
                location.href = "./index.html"
                setCookie("username", $("#text2").val(), 7)
            } else {
                alert("登录失败")
            }
        })
    })
</script>